<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.staticfile.net/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<style>
    h1 {
        text-align: center;
    }
</style>
<body>
<h1>学生信息展示</h1>
<div id="app">
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content">
                <h2>添加学生信息</h2>
                <el-form :model="stu" status-icon :rules="rules" ref="stu" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="姓名" prop="name">
                        <el-input type="text" v-model="stu.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input type="text" v-model="stu.age"></el-input>
                    </el-form-item>
                    <el-form-item label="身高" prop="height">
                        <el-input type="text" v-model="stu.height"></el-input>
                    </el-form-item>
                    <el-form-item label="学校" prop="school">
                        <el-input type="text" v-model="stu.school"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="text" @click="int()">添加</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="grid-content">
                <h2>修改学生信息</h2>
                <el-form :model="stuupdate" status-icon :rules="rules" ref="stu" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="学号" prop="id" v-model="showClass" v-if="showClass==true">
                        <el-input type="text" v-model="stuupdate.id"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input type="text" v-model="stuupdate.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input type="text" v-model="stuupdate.age"></el-input>
                    </el-form-item>
                    <el-form-item label="身高" prop="height">
                        <el-input type="text" v-model="stuupdate.height"></el-input>
                    </el-form-item>
                    <el-form-item label="学校" prop="school">
                        <el-input type="text" v-model="stuupdate.school"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="text" @click="update()">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
        <el-col :span="20">
            <div class="grid-content">
                <template>
                    <!-- 批量删除按钮 -->
                    <el-button type="text" @click="delmore()">批量删除</el-button>
                    <div class="serach">
                        <el-input v-model="selectoneid" placeholder="输入要查询的姓名" style="width:150px"></el-input>
                        <el-button icon="el-icon-search" circle @click="serach()"></el-button>
                    </div>
                    <el-table
                            v-loading="loading"
                            :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
                            class="tab"
                            :data="stuData"
                            border
                            style="width: 930px"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                label="学号"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="age"
                                label="年龄"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="height"
                                label="身高"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="school"
                                label="学校"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="180">
                            <template slot-scope="scope">
                                <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                                <el-button @click="upd(scope.row)" type="text" size="small">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="tabListPage">
                        <el-pagination @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-sizes="pageSizes"
                                       :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                                       :total="totalCount">
                        </el-pagination>
                    </div>
                </template>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="vue/qs.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                stuData: [],
                stu: {
                    id: "",
                    name: "",
                    age: null,
                    height: "",
                    school: null
                },
                stuupdate: {
                    id: "",
                    name: "",
                    age: null,
                    height: "",
                    school: null
                },
                show1: true,
                show2: false,
                showClass: false,
                rules: null,
                // 总数据
                tableData: [],
                // 默认显示第几页
                currentPage: 1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount: 1,
                // 个数选择器（可修改）
                pageSizes: [1, 2, 3, 4, 5, 6, 7, 8],
                // 默认每页显示的条数（可修改）
                PageSize: 1,
                //储存选中的ID
                multipleSelection: [],
                selectoneid: null
            }
        },
        mounted() {
            axios
                .get('/lodinweb2_0_war_exploded/student')
                .then((reponse) => {
                    this.stuData = reponse.data;
                })
                .catch(function (error) {  //请求失败处理
                    console.log(error);
                });
        },
        methods: {
            //1.分页
            getData() {
                // 这里使用axios，使用时请提前引入
                axios
                    .get('/lodinweb2_0_war_exploded/student')
                    .then(reponse => {
                        console.log(reponse)
                        // 将数据赋值给tableData
                        this.tableData = reponse.data
                        // 将数据的长度赋值给totalCount
                        this.totalCount = reponse.data.length
                    })
            },
            // 分页
            // 每页显示的条数
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize = val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage = val
            },


            //2.防跳墙
            stop() {
                axios
                    .get('/lodinweb2_0_war_exploded/crud?type=stop')
                    .then((reponse) => {
                        if (reponse.data == "666") {
                            this.getData();
                        } else {
                            window.location.href = "Login.html"
                        }
                    })
                    .catch(function (error) {  //请求失败处理
                        console.log(error);
                    });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val.map(item => item.id);
            },

            //3.批量删除业务
            delmore() {
                axios
                    .post('/lodinweb2_0_war_exploded/crud?type=delmore',
                        Qs.stringify({"studentIds": this.multipleSelection}, {arrayFormat: "repeat"}))
                    .then((reponse) => {
                        if (reponse.data.code == 200) {
                            this.$message({
                                message: reponse.data.message,
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getData();
                                }
                            });
                        }
                    })
                    .catch(function (error) {  //请求失败处理
                        console.log(error);
                    });
            },

            //4.展示
            // show() {
            //     axios
            //         .get('/lodinweb2_0_war_exploded/student')
            //         .then((reponse) => {
            //             this.stuData = reponse.data;
            //         })
            //         .catch(function (error) {  //请求失败处理
            //             console.log(error);
            //         });
            // },

            //5.删除单个
            del(id) {
                axios
                    .get('/lodinweb2_0_war_exploded/crud?type=del&id=' + id)
                    .then((reponse) => {
                        if (reponse.data.code == 200) {
                            this.$message({
                                message: reponse.data.message,
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getData();
                                }
                            });
                        }
                    })
                    .catch(function (error) {  //请求失败处理
                        console.log(error);
                    });
            },

            //6.更改
            upd(row) {
                this.show1 = !this.show1;
                this.show2 = !this.show2;
                this.stuupdate = {...row}
            },
            update() {
                axios
                    .get('/lodinweb2_0_war_exploded/crud?type=update&name=' + this.stuupdate.name +
                        '&age=' + this.stuupdate.age + '&height=' + this.stuupdate.height + '&school=' + this.stuupdate.school + '&id=' + this.stuupdate.id)
                    .then((reponse) => {
                        if (reponse.data.code == 200) {
                            this.$message({

                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getData();
                                }
                            });
                        }
                    })
                    .catch(function (error) {  //请求失败处理
                        console.log(error);
                    });
            },

            //7.添加
            int() {
                axios
                    .get('/lodinweb2_0_war_exploded/crud?type=add&name=' + this.stu.name +
                        '&age=' + this.stu.age + '&height=' + this.stu.height + '&school=' + this.stu.school)
                    .then((reponse) => {
                        if (reponse.data.code == 200) {
                            this.$message({
                                message: reponse.data.message,
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getData();
                                }
                            });
                        }
                    })
                    .catch(function (error) {  //请求失败处理
                        console.log(error);
                    });
            },
            //8.搜索
            serach() {
                axios
                    .get('/lodinweb2_0_war_exploded/crud?type=serach&id=' + this.selectoneid)
                    .then((reponse) => {
                        console.log("reponse.data:"+reponse.data);
                        console.log(this.selectoneid)
                        if (reponse.data == "without") {

                            alert("没有该学生")
                            this.selectoneid = null;
                        } else {

                            // console.log("11111:"+reponse.data);
                            this.tableData = reponse.data;
                            this.selectoneid = null;
                        }
                    })
                    .catch(function (error) {  //请求失败处理
                        console.log(error);
                    });
            }
        },
        created() {
            this.stop();
        },
        created: function () {
            this.getData()
        }
    })
</script>
</html>